﻿var page = new lg.page({
    data: {
        classId: 0,
        classSelect: null
    },
    mounted: function () {
        this.GetClassForSelect();
        this.List();
    },
    methods: {
        GetClassForSelect: function () {
            lg.request({
                url: "/SysApi/GetClassForSelect",
                success: function (d) {
                    if (d.code == 0 && d.data != null) {
                        for (var i in d.data) {
                            var obj = d.data[i];
                            if (obj.Depth > 1) {
                                obj.ClassName = lg.string.PadLeft(obj.ClassName, obj.Depth - 1, '　')
                            }
                        }
                    }
                    page.classSelect = d.data;
                }
            })
        },
        List: function () {
            layui.config({
                base: '/Plugins/layui/'
            })
            layui.use(['treeTable', 'table', 'element'], function () {
                var table = layui.table;
                var element = layui.element;  //元素
                var treetable = layui.treeTable;
                page.laytable = treetable.render({
                    height: 'full-200',
                    elem: '#ClassList',
                    url: "/SysApi/GetClasses"
                    , toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
                    , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    , tree: {
                        iconIndex: 0,
                        isPidData: true,
                        idName: "Id",
                        pidName: "FatherId",
                        openName: 'open',// 是否默认展开的字段名
                        //public bool open { get; set; }open字段是bool类型
                    },
                    cols: [[
                        {
                            field: 'ClassName', title: '频道名称'
                        }
                        , { field: 'PathName', title: '目录', width: 100, }
                        , { field: 'Id', title: 'ID', width: 100, }
                        , {
                            field: 'IsOutLink', title: '外链', width: 60, align: "center", templet: function (d) {
                                return d.IsOutLink == "1" ? "<i class=\"fa fa-link\" title=\"" + d.LinkUrl + "\"></i>" : "";
                            }
                        }
                        , { field: 'SortNumber', title: '权重值', width: 90, align: "center" }
                        , {
                            field: 'IsUsing', title: '是否启用', width: 100, align: 'center', templet: function (d) {
                                return laySwitch.render(d.IsUsing, 'use')
                            }
                        }
                        , {
                            field: 'IsShow', title: '是否显示', width:100, align: "center", templet: function (d) {
                                return laySwitch.render(d.IsShow, 'show')
                            }
                        }
                        , { fixed: 'right', title: '操作', toolbar: '#btTpl', width: 160 }
                    ]],
                    page: false
                });
                //头工具栏事件
                treetable.on('toolbar(ClassList)', function (obj) {
                    switch (obj.event) {
                        case 'addClass':
                            loadTpl({
                                url: "/Lgm/AddClass",
                                target: "#floatBody"
                            })
                            break;
                        case 'refresh':
                            page.laytable.reload();
                            break;
                    };
                });
                //监听行工具事件
                treetable.on('tool(ClassList)', function (obj) {
                    var data = obj.data;
                    console.log(obj)
                    switch (obj.event) {
                        case 'del':
                            layer.confirm('真的删除行么', function (index) {
                                obj.del();
                                layer.close(index);
                            });
                            break;
                        case 'edit':
                            loadTpl({
                                url: "/Lgm/EditClass/" + data.Id,
                                target: "#floatBody"
                            })
                            break;
                        case 'use':
                            laySwitch.do({
                                obj: obj,
                                key: "IsUsing",
                                url: "/SysApi/EditClass",
                            })
                            break;
                        case 'show':
                            laySwitch.do({
                                obj: obj,
                                key: "IsShow",
                                url: "/SysApi/EditClass",
                            })
                            break;
                    }
                });
            })
        },
        Add: function () {
            var form = layui.form;
            var upload = layui.upload
            form.render();
            if (this.classSelect) {
                console.log(this.classSelect)
                lg.select.fill({
                    data: this.classSelect,
                    value: "Id",
                    text: "ClassName",
                    target: "#FatherId",
                    callback: function () {
                        form.render();
                    }
                })
            }
            //拖拽上传
            upload.render({
                elem: '#upImg'
                , url: '/SysApi/SmallImgUpLoad' //改成您自己的上传接口
                , done: function (res) {
                    if (res.state) {
                        layer.msg('上传成功', { icon: 1 });
                        $(this.elem).find(".viewImg").html("<hr><img src='" + res.filePath + "' />");
                        $("#ImageUrl").val(res.filePath);
                    } else {
                        layer.msg(d.msg, { icon: 2 })
                    }
                }
            });
            form.on("submit(AddClass)", function (d) {
                if (!d.field.IsUsing) {
                    d.field.IsUsing = 0
                }
                lg.request({
                    url: "/SysApi/AddClass",
                    method: "post",
                    data: d.field,
                    success: function (d) {
                        if (d.code == 0) {
                            layer.msg("添加成功", { icon: 1 });
                            page.back(true);
                        } else {
                            layer.msg(d.msg, { icon: 2 })
                        }
                    }
                })
                return false;
            })
        },
        Edit: function (id) {
            var form = layui.form;
            var upload = layui.upload
                , element = layui.element
                , layer = layui.layer;
            var model = false;
            var select = false;
            //获取编辑分类实体
            lg.request({
                url: "/SysApi/GetClass/"+id,
                success: function (d) {
                    if (d.code == 0) {
                        model = d.data;
                        form.val("ClassEditForm", d.data);
                        if (select) {
                            form.val("ClassEditForm", {
                                "FatherId": d.data.FatherId + ""
                            })
                        }
                        $(".viewImg").html("<hr><img src='" + d.data.IconUrl + "' />")
                    }
                }
            })
            if (this.classSelect) {
                lg.select.fill({
                    data: this.classSelect,
                    value: "Id",
                    text: "ClassName",
                    target: "#FatherId",
                    callback: function () {
                        form.render();
                    }
                })
            }
            //拖拽上传
            upload.render({
                elem: '#upImg'
                , url: '/SysApi/SmallImgUpLoad' //改成您自己的上传接口
                , done: function (res) {
                    if (res.state) {
                        layer.msg('上传成功', { icon: 1 });
                        $(this.elem).find(".viewImg").html("<hr><img src='" + res.filePath + "' />");
                        $("#ImageUrl").val(res.filePath);
                    } else {
                        layer.msg(d.msg, { icon: 2 })
                    }

                }
            });
            form.on("submit(EditClass)", function (d) {
                if (!d.field.IsUsing) {
                    d.field.IsUsing = 0
                }
                lg.request({
                    url: "/SysApi/EditClass",
                    method: "post",
                    data: d.field,
                    success: function (d) {
                        if (d.code == 0) {
                            layer.msg("修改成功!", { icon: 1 })
                            page.back(true);
                        } else {
                            layer.msg(d.msg, { icon: 2 })
                        }
                    }
                })
                return false;
            })
        },
    }
});